<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <!-- 菜单 -->
                <MyMenu></MyMenu>
            </el-aside>
            <el-container>
                <el-header>
                    <el-row :gutter="20">
                        <el-col :span="20">
                            面包屑导航
                        </el-col>
                        <el-col :span="4" style="text-align: right;">
                            <el-link type="danger" @click.prevent="logout">退出</el-link>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            标签页
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import MyMenu from '@/components/MyMenu.vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter()
const logout = () => {
    // 删除本地存储中token
    localStorage.removeItem('token')
    // 提示消息
    ElMessage.success('退出成功')
    // 跳转到登录页
    router.push('/login')
}
</script>

<style scoped></style>